<template>
  <el-popover v-model:visible="popverVisible" :width="width"
              placement="bottom" popper-class="no-padding-popover"
              trigger="click">
    <div class="xr-radio-menu">
      <div class="xr-radio-menu__content">
        <div v-for="(item, index) in options" :key="index"
             :class="{ 'selected' : value == item.command}"
             class="xr-radio-menu-item"
             @click="selectClick(item)">
          <div class="mark"/>
          {{ item.label }}
        </div>
      </div>
    </div>
    <template v-slot:reference>
      <slot name="reference"/>
    </template>
  </el-popover>
</template>

<!--这个类只用在workbench/index组件中-->
<script setup>
import {ref, onMounted, watchEffect} from "vue";

const popverVisible = ref(false)
defineOptions({
  name: 'XrRadioMenu',
})

const props = defineProps({
  width: {
    type: [String, Number],
    default: 200
  },
  options: Array, // {command label}
  value: [String, Number]
})

onMounted(() => {
})

watchEffect(() => {
})

const emit = defineEmits(['input', 'select'])

// 类型选择
function selectClick(item) {
  popverVisible.value = false
  emit('input', item.command)
  emit('select', item.command)
}
</script>
<style lang="scss" scoped>
.xr-radio-menu {
  .xr-radio-menu__content {
    max-height: 250px;
    overflow-y: auto;

    .xr-radio-menu-item {
      height: 34px;
      line-height: 34px;
      padding: 0 20px;
      color: #606266;
      position: relative;
      cursor: pointer;

      .mark {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        margin-right: 8px;
        background-color: transparent;
      }
    }

    .selected {
      color: $xr-color-primary;
      font-weight: bold;

      .mark {
        background-color: $xr-color-primary;
      }
    }

    .xr-radio-menu-item:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>
